<template>
  <view class="main-view">
    <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
    <scroll-view scrollY class="item-list">
      <view class="list-view">
        <itemView v-for="item in  listData" :itemData="item" type="ttg" @open="open"></itemView>
        <no-data v-if="!loading && listData.length == 0"></no-data>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getSingleList } from '@/common/api/home'
import itemView from '@/components/home/itemView.vue';
export default {
  components: {
    itemView
  },
  data () {
    return {
      loading: true,
      list: ['未处理', '已处理', '已过期'],
      listData: [],
      curNow: 0,
      params: {

        "matchStatus": "U"
      }
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    open (data) {
      this.$Router.push(`/planDetail?id=${data.matchId}&title=${data.matchStr}&type=ttg`)
    },
    getDataList () {
      this.loading = true
      getSingleList(this.params).then(res => {
        console.log(res)
        this.loading = false
        this.listData = res.data
      })
    },
    sectionChange (index) {
      switch (index) {
        case 0:
          this.params.matchStatus = "U"
          break;
        case 1:
          this.params.matchStatus = "P"
          break;
        case 2:
          this.params.matchStatus = "O"
          break
      }
      console.log(index)
      this.curNow = index;
      this.getDataList()
    }
  }
}
</script>
<style lang="less" scoped>
.main-view {
  background-color: #f5f5f5;
  height: 100%;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;

  .item-list {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
  }

  .item-view {
    background-color: #fff;
    border-radius: 10rpx;
    margin: 30rpx 0;
    padding: 30rpx;

    .item-content {
      display: flex;
      margin-top: 20rpx;
      align-items: center;
      justify-content: space-between;

      .item-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .item-type {
      color: #3d8ce6;
    }

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .item-time {
        font-size: 24rpx;
        color: #999;
      }

      .item-status {}

    }

  }
}
</style>
